<!DOCTYPE html>
<html>
<head>
    <title>Feynman Diagram</title>
</head>
<body>
<canvas id="feynmanDiagram" width="500" height="350"></canvas>
<script>
    const canvas = document.getElementById('feynmanDiagram');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrowhead. The arrowhead tip will be at (x,y)
    // and it will point in the direction of 'angle'.
    function drawArrowhead(ctx, x, y, angle, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2);
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, size / 2);
        ctx.stroke();
        ctx.restore();
    }
    
    // --- Drawing parameters ---
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    const baseFont = '24px Times New Roman';
    const largeFont = '28px Times New Roman';
    
    // --- Clear canvas with white background ---
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'black';

    // --- Outer Rectangle ---
    ctx.strokeRect(10, 10, 480, 280);

    // --- Define particle line coordinates ---
    // Vertices
    const vertex_left = { x: 180, y: 150 };
    const vertex_right = { x: 320, y: 150 };

    // Fermion lines endpoints
    const nu_start = { x: 80, y: 250 };
    const mu_end = { x: 80, y: 50 };
    const d_start = { x: 420, y: 250 };
    const u_end = { x: 420, y: 50 };

    // --- Draw solid lines (fermions) ---
    ctx.beginPath();
    // nu line (incoming)
    ctx.moveTo(nu_start.x, nu_start.y);
    ctx.lineTo(vertex_left.x, vertex_left.y);
    // mu line (outgoing)
    ctx.moveTo(vertex_left.x, vertex_left.y);
    ctx.lineTo(mu_end.x, mu_end.y);
    // d line (incoming)
    ctx.moveTo(d_start.x, d_start.y);
    ctx.lineTo(vertex_right.x, vertex_right.y);
    // u line (outgoing)
    ctx.moveTo(vertex_right.x, vertex_right.y);
    ctx.lineTo(u_end.x, u_end.y);
    ctx.stroke();

    // --- Draw dashed line (W boson) ---
    ctx.save();
    ctx.setLineDash([10, 5]);
    ctx.beginPath();
    ctx.moveTo(vertex_left.x, vertex_left.y);
    ctx.lineTo(vertex_right.x, vertex_right.y);
    ctx.stroke();
    ctx.restore();
    
    // --- Draw Arrowheads ---
    const arrowSize = 10;
    // Arrow for neutrino (ν) -> points towards left vertex
    let angle_nu = Math.atan2(vertex_left.y - nu_start.y, vertex_left.x - nu_start.x);
    let arrow_nu_pos = { x: (nu_start.x + vertex_left.x) / 2, y: (nu_start.y + vertex_left.y) / 2 };
    drawArrowhead(ctx, arrow_nu_pos.x, arrow_nu_pos.y, angle_nu, arrowSize);

    // Arrow for muon (μ⁻) -> points away from left vertex
    let angle_mu = Math.atan2(mu_end.y - vertex_left.y, mu_end.x - vertex_left.x);
    let arrow_mu_pos = { x: (vertex_left.x + mu_end.x) / 2, y: (vertex_left.y + mu_end.y) / 2 };
    drawArrowhead(ctx, arrow_mu_pos.x, arrow_mu_pos.y, angle_mu, arrowSize);

    // Arrow for down quark (d) -> points towards right vertex
    let angle_d = Math.atan2(vertex_right.y - d_start.y, vertex_right.x - d_start.x);
    let arrow_d_pos = { x: (d_start.x + vertex_right.x) / 2, y: (d_start.y + vertex_right.y) / 2 };
    drawArrowhead(ctx, arrow_d_pos.x, arrow_d_pos.y, angle_d, arrowSize);

    // Arrow for up quark (u) -> points away from right vertex
    let angle_u = Math.atan2(u_end.y - vertex_right.y, u_end.x - vertex_right.x);
    let arrow_u_pos = { x: (vertex_right.x + u_end.x) / 2, y: (vertex_right.y + u_end.y) / 2 };
    drawArrowhead(ctx, arrow_u_pos.x, arrow_u_pos.y, angle_u, arrowSize);

    // --- Draw Labels ---
    ctx.font = baseFont;
    ctx.textBaseline = 'middle';
    
    // Left side labels
    ctx.textAlign = 'right';
    ctx.fillText("k'", 75, 40);
    ctx.fillText('μ\u207B', 125, 80); // μ⁻
    ctx.fillText('ν', 125, 220); // ν
    ctx.fillText('k', 75, 260);

    // Right side labels
    ctx.textAlign = 'left';
    ctx.fillText("p'", 425, 40);
    ctx.fillText('u', 375, 80);
    ctx.fillText('d', 375, 220);
    ctx.fillText('p', 425, 260);
    
    // Center labels
    ctx.textAlign = 'center';
    ctx.font = largeFont;
    ctx.fillText('W', (vertex_left.x + vertex_right.x) / 2, 125);
    
    // Caption
    ctx.font = baseFont;
    ctx.fillText('Fig. 3.19', canvas.width / 2, 320);

</script>
</body>
</html>